<template>
    <div>
        <ul class="footer">
            <li>
                <router-link :to="{ name: 'businessClassificationPage' }">
                    <i class="fa fa-home"></i>
                    <p>首页</p>
                </router-link>
            </li>
            <li>
                <router-link :to="{ name: 'discoveryPage' }">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </router-link>
            </li>
            <li>
                <router-link :to="{ name: 'myOrdersPage' }">
                    <i class="fa fa-file-text-o"></i>
                    <p>订单</p>
                </router-link>

            </li>
            <li>
                <router-link :to="{ name: 'myInfoPage' }">
                    <i class="fa fa-user-o"></i>
                    <p>我的</p>
                </router-link>

            </li>
        </ul>
    </div>
</template>

<script setup>

import { RouterLink } from 'vue-router';
</script>

<style lang="scss" scoped>
.footer {
    width: 100%;
    height: 14vw;
    border-top: solid 1px #DDD;
    background-color: #fff;

    position: fixed;
    left: 0;
    bottom: 0;

    display: flex;
    justify-content: space-around;
    align-items: center;


    li a {
        /*li本身的尺寸完全由内容撑起*/
        display: flex;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        color: #999;
        user-select: none;
        cursor: pointer;
        text-decoration: none;


        p {
            font-size: 2.8vw;
        }

        i {
            font-size: 5vw;
        }
    }



}
</style>